Reactã®Concurrentæ©èœãæ·±ãæãäžããåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ãæ¢æ±ããŸããã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãæé©åããã·ãŒã ã¬ã¹ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãå®çŸããæ¹æ³ãåŠã³ãŸãããã
React Concurrentæ©èœïŒåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ããã¹ã¿ãŒããŠãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžããã
Reactã®Concurrentæ©èœã¯ãReactã¢ããªã±ãŒã·ã§ã³ãæŽæ°ãšã¬ã³ããªã³ã°ãã©ã®ããã«åŠçãããã®å€§ããªé²åã衚ããŠããŸãããã®äžã§æã圱é¿åã®ããåŽé¢ã®äžã€ãåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã§ãããéçºè ã¯ããã¬ã¹ãã³ã·ãã§ããã©ãŒãã³ã¹ã®é«ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãäœæã§ããŸãããã®èšäºã§ã¯ãReactãããžã§ã¯ãã§åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ãçè§£ããå®è£ ããããã®å æ¬çãªã¬ã€ããæäŸããŸãã
React Concurrentæ©èœãšã¯ïŒ
åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã«é£ã³èŸŒãåã«ãReact Concurrentæ©èœã®ããåºãæèãçè§£ããããšãéèŠã§ããReact 16ã§å°å ¥ããããããã®æ©èœã«ãããReactã¯ã¿ã¹ã¯ã䞊è¡ããŠå®è¡ã§ããããã«ãªããè€æ°ã®æŽæ°ãã¡ã€ã³ã¹ã¬ããããããã¯ããããšãªã䞊è¡ããŠåŠçã§ããŸããããã«ãããç¹ã«è€éãªã¢ããªã±ãŒã·ã§ã³ã«ãããŠãããæµåçã§ã¬ã¹ãã³ã·ããªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãå®çŸããŸãã
Concurrentæ©èœã®äž»ãªåŽé¢ã¯æ¬¡ã®ãšããã§ãã
- äžæå¯èœãªã¬ã³ããªã³ã°ïŒ Reactã¯åªå 床ã«åºã¥ããŠã¬ã³ããªã³ã°ã¿ã¹ã¯ãäžæåæ¢ãåéããŸãã¯ç Žæ£ã§ããŸãã
- ã¿ã€ã ã¹ã©ã€ã·ã³ã°ïŒ é·æéå®è¡ãããã¿ã¹ã¯ã¯ããå°ããªãã£ã³ã¯ã«åå²ããããã©ãŠã¶ããŠãŒã¶ãŒå ¥åã«å¿çãç¶ããããããã«ããŸãã
- SuspenseïŒ ããŒã¿ãã§ãããªã©ã®éåææäœã宣èšçã«åŠçããæ¹æ³ãæäŸããUIã®ããããã³ã°ãé²ããŸãã
- åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ïŒ éçºè ãç°ãªãæŽæ°ã«åªå 床ãå²ãåœãŠãããšãå¯èœã«ããæãéèŠãªå€æŽãæåã«ã¬ã³ããªã³ã°ãããããã«ããŸãã
åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã®çè§£
åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã¯ãReactãæŽæ°ãDOMã«é©çšããé åºã決å®ããã¡ã«ããºã ã§ããåªå 床ãå²ãåœãŠãããšã§ãã©ã®æŽæ°ãããç·æ¥ã§ãããšèŠãªãããä»ã®æŽæ°ãããå ã«ã¬ã³ããªã³ã°ãããã¹ãããå¶åŸ¡ã§ããŸããããã¯ããŠãŒã¶ãŒå ¥åãã£ãŒã«ããã¢ãã¡ãŒã·ã§ã³ãªã©ã®éèŠãªUIèŠçŽ ããä»ã®éèŠã§ãªãæŽæ°ãããã¯ã°ã©ãŠã³ãã§çºçããŠããå Žåã§ãã¬ã¹ãã³ã·ãã§ããç¶ããããšãä¿èšŒããã®ã«ç¹ã«åœ¹ç«ã¡ãŸãã
Reactã¯å éšçã«ã¹ã±ãžã¥ãŒã©ã䜿çšããŠãããã®æŽæ°ã管çããŸããã¹ã±ãžã¥ãŒã©ã¯æŽæ°ãç°ãªãã¬ãŒã³ïŒåªå 床ãã¥ãŒãšèããŠãã ããïŒã«åé¡ããŸããåªå 床ã®é«ãã¬ãŒã³ãæã€æŽæ°ã¯ãåªå 床ã®äœããã®ãããå ã«åŠçãããŸãã
ãªãåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ãéèŠãªã®ãïŒ
åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã®å©ç¹ã¯æ°å€ããããŸãã
- ã¬ã¹ãã³ã¹æ§ã®åäžïŒ éèŠãªæŽæ°ãåªå ããããšã§ãéãåŠçäžã«UIãå¿çããªããªãã®ãé²ãããšãã§ããŸããäŸãã°ãã¢ããªã±ãŒã·ã§ã³ãåæã«ããŒã¿ããã§ããããŠããå Žåã§ããå ¥åãã£ãŒã«ããžã®ã¿ã€ãã³ã°ã¯åžžã«å¿çæ§ãä¿ãããã¹ãã§ãã
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžïŒ ã¬ã¹ãã³ã·ãã§æµåçãªUIã¯ãããè¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ã€ãªãããŸãããŠãŒã¶ãŒã¯ã©ã°ãé å»¶ãçµéšããå¯èœæ§ãäœããªããã¢ããªã±ãŒã·ã§ã³ãããããã©ãŒãã³ã¹ãé«ããšæããããŸãã
- ããã©ãŒãã³ã¹ã®æé©åïŒ æŽæ°ãæŠç¥çã«åªå é äœä»ãããããšã§ãäžèŠãªåã¬ã³ããªã³ã°ãæå°éã«æããã¢ããªã±ãŒã·ã§ã³å šäœã®ããã©ãŒãã³ã¹ãæé©åã§ããŸãã
- éåææäœã®åªé ãªåŠçïŒ Concurrentæ©èœã¯ãç¹ã«Suspenseãšçµã¿åãããããšã§ãUIããããã¯ããããšãªãããŒã¿ãã§ããããã®ä»ã®éåææäœã管çã§ããŸãã
Reactã«ãããåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã®ä»çµã¿
Reactã®ã¹ã±ãžã¥ãŒã©ã¯ãåªå 床ã¬ãã«ã«åºã¥ããŠæŽæ°ã管çããŸããReactã¯åã ã®æŽæ°ã«æç€ºçã«åªå 床ã¬ãã«ãèšå®ããããã®çŽæ¥çãªAPIãå ¬éããŠããŸããããã¢ããªã±ãŒã·ã§ã³ã®æ§é åæ¹æ³ãç¹å®ã®APIã®äœ¿ç𿹿³ããReactãç°ãªãæŽæ°ã«å²ãåœãŠãåªå åºŠã«æé»çã«åœ±é¿ãäžããŸãããããã®ã¡ã«ããºã ãçè§£ããããšããåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã广çã«æŽ»çšããéµã§ãã
ã€ãã³ããã³ãã©ã«ããæé»çãªåªå é äœä»ã
ã¯ãªãã¯ãããŒãã¬ã¹ããã©ãŒã éä¿¡ãªã©ã®ãŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ã«ãã£ãŠããªã¬ãŒãããæŽæ°ã¯ãäžè¬çã«éåææäœãã¿ã€ããŒã«ãã£ãŠããªã¬ãŒãããæŽæ°ãããé«ãåªå 床ãäžããããŸããããã¯ãReactããŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ã¯ããæéçå¶çŽãå³ããã峿ã®ãã£ãŒãããã¯ãå¿ èŠã§ãããšæ³å®ããŠããããã§ãã
äŸïŒ
```javascript function MyComponent() { const [text, setText] = React.useState(''); const handleChange = (event) => { setText(event.target.value); }; return ( ); } ```ãã®äŸã§ã¯ã`text`ã¹ããŒããæŽæ°ãã`handleChange`颿°ã¯ããŠãŒã¶ãŒã®å ¥åã«ãã£ãŠçŽæ¥ããªã¬ãŒããããããé«ãåªå 床ãäžããããŸããReactã¯ãã®æŽæ°ã®ã¬ã³ããªã³ã°ãåªå ããå ¥åãã£ãŒã«ãã®å¿çæ§ã確ä¿ããŸãã
useTransition ã䜿çšããäœåªå
åºŠã®æŽæ°
useTransitionããã¯ã¯ãç¹å®ã®æŽæ°ãç·æ¥ã§ãªããã®ãšããŠæç€ºçã«ããŒã¯ããããã®åŒ·åãªããŒã«ã§ããUIããããã¯ããããšãªããããç¶æ
ããå¥ã®ç¶æ
ã«ç§»è¡ã§ããŸããããã¯ãå€§èŠæš¡ãªåã¬ã³ããªã³ã°ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ãšã£ãŠå³ææ§ãéèŠã§ãªãè€éãªèšç®ãããªã¬ãŒããæŽæ°ã«ç¹ã«åœ¹ç«ã¡ãŸãã
useTransitionã¯2ã€ã®å€ãè¿ããŸãã
isPendingïŒ ãã©ã³ãžã·ã§ã³ãçŸåšé²è¡äžãã©ããã瀺ãããŒã«å€ãstartTransitionïŒ é å»¶ããããã¹ããŒãæŽæ°ãã©ãããã颿°ã
äŸïŒ
```javascript import React, { useState, useTransition } from 'react'; function MyComponent() { const [isPending, startTransition] = useTransition(); const [filter, setFilter] = useState(''); const [data, setData] = useState([]); const handleFilterChange = (event) => { const newFilter = event.target.value; // Defer the state update that triggers the data filtering startTransition(() => { setFilter(newFilter); }); }; // Simulate data fetching and filtering based on the 'filter' state React.useEffect(() => { // Simulate an API call setTimeout(() => { const filteredData = Array.from({ length: 1000 }, (_, i) => `Item ${i}`).filter(item => item.includes(filter)); setData(filteredData); }, 500); }, [filter]); return (Filtering...
}-
{data.map((item, index) => (
- {item} ))}
ãã®äŸã§ã¯ã`handleFilterChange`颿°ã¯`startTransition`ã䜿çšããŠ`setFilter`ã¹ããŒãã®æŽæ°ãé å»¶ãããŸããããã¯ãReactããã®æŽæ°ãç·æ¥æ§ã®äœããã®ãšããŠæ±ããããåªå 床ã®é«ãæŽæ°ïŒäŸãã°ãå¥ã®ãŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ïŒãçºçããå Žåã«ã¯äžæããå¯èœæ§ãããããšãæå³ããŸãã`isPending`ãã©ã°ã䜿çšãããšããã©ã³ãžã·ã§ã³ãé²è¡äžã«ããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãŒã衚瀺ã§ãããŠãŒã¶ãŒã«èŠèŠçãªãã£ãŒãããã¯ãæäŸããŸãã
`useTransition`ããªããã°ããã£ã«ã¿ãŒã倿Žãããšå³åº§ã«ãªã¹ãå šäœã®åã¬ã³ããªã³ã°ãããªã¬ãŒãããç¹ã«å€§èŠæš¡ãªããŒã¿ã»ããã§ã¯UIãå¿çããªããªãå¯èœæ§ããããŸãã`useTransition`ã䜿çšããããšã§ããã£ã«ã¿ãªã³ã°ã¯äœåªå 床ã®ã¿ã¹ã¯ãšããŠå®è¡ãããå ¥åãã£ãŒã«ãã¯å¿çæ§ãä¿ã€ããšãã§ããŸãã
ãããæŽæ°ã®çè§£
Reactã¯ãå¯èœãªéãè€æ°ã®ã¹ããŒãæŽæ°ãåäžã®åã¬ã³ããªã³ã°ã«èªåçã«ãããåŠçããŸããããã¯ãReactãDOMãæŽæ°ããå¿ èŠãããåæ°ãæžããããã©ãŒãã³ã¹æé©åã§ãããããããããåŠçãåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ãšã©ã®ããã«çžäºäœçšããããçè§£ããããšãéèŠã§ãã
æŽæ°ããããåŠçããããšããããã¯ãã¹ãŠåãåªå 床ãæã€ãã®ãšããŠæ±ãããŸããã€ãŸããæŽæ°ã®1ã€ãé«ãåªå 床ïŒäŸãã°ããŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ã«ãã£ãŠããªã¬ãŒããããã®ïŒã§ããå ŽåããããåŠçããããã¹ãŠã®æŽæ°ããã®é«ãåªå 床ã§ã¬ã³ããªã³ã°ãããŸãã
Suspense ã®åœ¹å²
Suspenseã䜿çšãããšãããŒã¿ãããŒããããã®ãåŸ
ã£ãŠããéãã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°ããäžæãã§ããŸããããã«ãããããŒã¿ã®ãã§ããäžã«UIããããã¯ãããã®ãé²ãããã®éã«ãã©ãŒã«ããã¯UIïŒäŸãã°ãããŒãã£ã³ã°ã¹ãããŒïŒã衚瀺ã§ããŸãã
Concurrentæ©èœãšå ±ã«äœ¿çšãããšã`Suspense`ã¯åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ãšã·ãŒã ã¬ã¹ã«çµ±åãããŸããã³ã³ããŒãã³ããäžæãããŠããéãReactã¯ããé«ãåªå 床ã§ã¢ããªã±ãŒã·ã§ã³ã®ä»ã®éšåã®ã¬ã³ããªã³ã°ãç¶ããããšãã§ããŸããããŒã¿ãããŒãããããšãäžæãããŠããã³ã³ããŒãã³ãã¯ããäœãåªå 床ã§ã¬ã³ããªã³ã°ãããããã»ã¹å šäœãéããŠUIãå¿çæ§ãä¿ã€ããšãä¿èšŒãããŸãã
äŸïŒ
```javascript import React, { Suspense } from 'react'; // Simulate a component that suspends while fetching data const DataComponent = React.lazy(() => import('./DataComponent')); function MyComponent() { return (ãã®äŸã§ã¯ã`DataComponent`ã¯`React.lazy`ã䜿çšããŠé å»¶ããŒããããŸããã³ã³ããŒãã³ããããŒããããŠããéã`Suspense`ã³ã³ããŒãã³ãã¯`fallback` UIã衚瀺ããŸãã`DataComponent`ãããŒããããŠããéãReactã¯ã¢ããªã±ãŒã·ã§ã³ã®ä»ã®éšåã®ã¬ã³ããªã³ã°ãç¶ããããšãã§ããUIã®å¿çæ§ãç¶æãããŸãã
å®è·µçãªäŸãšãŠãŒã¹ã±ãŒã¹
ããŸããŸãªã·ããªãªã§ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããã«ãåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ãã©ã®ããã«äœ¿çšãããã®å®è·µçãªäŸãããã€ãèŠãŠã¿ãŸãããã
1. å€§èŠæš¡ããŒã¿ã»ããã§ã®ãŠãŒã¶ãŒå ¥åã®åŠç
ãŠãŒã¶ãŒå ¥åã«åºã¥ããŠãã£ã«ã¿ãªã³ã°ããå¿ èŠãããå€§èŠæš¡ãªããŒã¿ã»ããããããšæ³åããŠãã ãããåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ããªããã°ãå ¥åãã£ãŒã«ãã«å ¥åãããšããŒã¿ã»ããå šäœã®åã¬ã³ããªã³ã°ãããªã¬ãŒãããUIãå¿çããªããªãå¯èœæ§ããããŸãã
`useTransition`ã䜿çšãããšããã£ã«ã¿ãªã³ã°æäœãé
å»¶ãããããšãã§ãããã£ã«ã¿ãªã³ã°ãããã¯ã°ã©ãŠã³ãã§å®è¡ãããŠããéãå
¥åãã£ãŒã«ãã¯å¿çæ§ãä¿ã€ããšãã§ããŸããïŒåã®'useTransitionã®äœ¿çš'ã»ã¯ã·ã§ã³ã§æäŸãããäŸãåç
§ããŠãã ããïŒã
2. ã¢ãã¡ãŒã·ã§ã³ã®åªå é äœä»ã
ã¢ãã¡ãŒã·ã§ã³ã¯ãã¹ã ãŒãºã§é åçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãäœæããããã«ãã°ãã°éèŠã§ããã¢ãã¡ãŒã·ã§ã³ã®æŽæ°ã«é«ãåªå 床ãäžããããšã§ãä»ã®éèŠã§ãªãæŽæ°ã«ãã£ãŠäžæãããã®ãé²ãããšãã§ããŸãã
ã¢ãã¡ãŒã·ã§ã³æŽæ°ã®åªå 床ãçŽæ¥å¶åŸ¡ããããšã¯ã§ããŸãããããããããŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ïŒäŸãã°ãã¢ãã¡ãŒã·ã§ã³ãããªã¬ãŒããã¯ãªãã¯ã€ãã³ãïŒã«ãã£ãŠçŽæ¥ããªã¬ãŒãããããã«ããããšã§ãæé»çã«é«ãåªå 床ãäžããããŸãã
äŸïŒ
```javascript import React, { useState } from 'react'; function AnimatedComponent() { const [isAnimating, setIsAnimating] = useState(false); const handleClick = () => { setIsAnimating(true); setTimeout(() => { setIsAnimating(false); }, 1000); // Animation duration }; return (ãã®äŸã§ã¯ã`handleClick`颿°ã`isAnimating`ã¹ããŒããèšå®ããããšã§çŽæ¥ã¢ãã¡ãŒã·ã§ã³ãããªã¬ãŒããŸãããã®æŽæ°ã¯ãŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ã«ãã£ãŠããªã¬ãŒããããããReactã¯ãããåªå ããã¢ãã¡ãŒã·ã§ã³ãã¹ã ãŒãºã«å®è¡ãããããšãä¿èšŒããŸãã
3. ããŒã¿ãã§ãããšSuspense
APIããããŒã¿ããã§ããããå ŽåãããŒã¿ãããŒããããŠããéãUIããããã¯ãããã®ãé²ãããšãéèŠã§ãã`Suspense`ã䜿çšãããšãããŒã¿ããã§ãããããŠããéã«ãã©ãŒã«ããã¯UIã衚瀺ã§ããããŒã¿ãå©çšå¯èœã«ãªããšReactãèªåçã«ã³ã³ããŒãã³ããã¬ã³ããªã³ã°ããŸãã
ïŒåã®'The Role of Suspense'ã»ã¯ã·ã§ã³ã§æäŸãããäŸãåç
§ããŠãã ããïŒã
åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ãå®è£ ããããã®ãã¹ããã©ã¯ãã£ã¹
åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã广çã«æŽ»çšããããã«ã以äžã®ãã¹ããã©ã¯ãã£ã¹ãèæ ®ããŠãã ããã
- éèŠãªæŽæ°ã®ç¹å®ïŒ ã¢ããªã±ãŒã·ã§ã³ãæ³šææ·±ãåæãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ãšã£ãŠæãéèŠãªæŽæ°ïŒäŸïŒãŠãŒã¶ãŒå ¥åãã¢ãã¡ãŒã·ã§ã³ïŒãç¹å®ããŸãã
- éèŠã§ãªãæŽæ°ã«ã¯
useTransitionã䜿çšããïŒ ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ãšã£ãŠå³ææ§ãéèŠã§ãªãæŽæ°ã¯ã`useTransition`ããã¯ã䜿çšããŠé å»¶ãããŸãã - ããŒã¿ãã§ããã«
SuspenseãæŽ»çšããïŒ ããŒã¿ã®ããŒãäžã«UIããããã¯ãããã®ãé²ãããã«ã`Suspense`ã䜿çšããŠããŒã¿ãã§ãããåŠçããŸãã - ã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°ãæé©åããïŒ ã¡ã¢åïŒ
React.memoïŒãäžèŠãªã¹ããŒãæŽæ°ã®åé¿ãªã©ã®ãã¯ããã¯ã䜿çšããŠãäžèŠãªåã¬ã³ããªã³ã°ãæå°éã«æããŸãã - ã¢ããªã±ãŒã·ã§ã³ã®ãããã¡ã€ãªã³ã°ïŒ React Profilerã䜿çšããŠããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ããåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ãæã广çãªé åãç¹å®ããŸãã
äžè¬çãªèœãšã穎ãšãããåé¿ããæ¹æ³
åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã¯ããã©ãŒãã³ã¹ãå€§å¹ ã«åäžãããããšãã§ããŸãããããã€ãã®äžè¬çãªèœãšãç©Žã«æ³šæããããšãéèŠã§ãã
useTransitionã®é床ã®äœ¿çšïŒ ããŸãã«ãå€ãã®æŽæ°ãé å»¶ããããšãUIã®å¿çæ§ãäœäžããå¯èœæ§ããããŸããæ¬åœã«éèŠã§ãªãæŽæ°ã«ã®ã¿`useTransition`ã䜿çšããŠãã ããã- ããã©ãŒãã³ã¹ããã«ããã¯ã®ç¡èŠïŒ åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã¯éæ³ã®åŒŸäžžã§ã¯ãããŸãããã³ã³ããŒãã³ããããŒã¿ãã§ããããžãã¯ã®æ ¹æ¬çãªããã©ãŒãã³ã¹åé¡ã«å¯ŸåŠããããšãéèŠã§ãã
Suspenseã®äžé©åãªäœ¿çšïŒ `Suspense`ã®å¢çãæ£ããé 眮ããããã©ãŒã«ããã¯UIãè¯å¥œãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããŠããããšã確èªããŠãã ããã- ãããã¡ã€ãªã³ã°ã®æ æ ¢ïŒ ããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ããåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°æŠç¥ã广çã§ããããšã確èªããããã«ããããã¡ã€ãªã³ã°ã¯äžå¯æ¬ ã§ãã
åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°åé¡ã®ãããã°
åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã«é¢é£ããåé¡ã®ãããã°ã¯ãã¹ã±ãžã¥ãŒã©ã®åäœãè€éã§ãããããå°é£ãªå ŽåããããŸãã以äžã«ãããã°ã®ãã³ããããã€ã瀺ããŸãã
- React Profilerã䜿çšããïŒ React Profilerã¯ãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ã«é¢ãã貎éãªæŽå¯ãæäŸããã¬ã³ããªã³ã°ã«æéãããããããŠããæŽæ°ãç¹å®ããã®ã«åœ¹ç«ã¡ãŸãã
isPendingã¹ããŒããç£èŠããïŒ `useTransition`ã䜿çšããŠããå Žåã¯ã`isPending`ã¹ããŒããç£èŠããŠãæŽæ°ãæåŸ ã©ããã«é å»¶ãããŠããããšã確èªããŸããconsole.logã¹ããŒãã¡ã³ãã䜿çšããïŒ ã³ã³ããŒãã³ãã«`console.log`ã¹ããŒãã¡ã³ãã远å ããŠããã€ã¬ã³ããªã³ã°ãããã©ã®ãããªããŒã¿ãåãåã£ãŠãããã远跡ããŸãã- ã¢ããªã±ãŒã·ã§ã³ãåçŽåããïŒ è€éãªã¢ããªã±ãŒã·ã§ã³ã®ãããã°ã«åé¡ãããå Žåã¯ãäžèŠãªã³ã³ããŒãã³ããããžãã¯ãåé€ããŠåçŽåããŠã¿ãŠãã ããã
çµè«
React Concurrentæ©èœãç¹ã«åªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã¯ãReactã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãšå¿çæ§ãæé©åããããã®åŒ·åãªããŒã«ãæäŸããŸããReactã®ã¹ã±ãžã¥ãŒã©ã®ä»çµã¿ãçè§£ãã`useTransition`ã`Suspense`ãªã©ã®APIã广çã«äœ¿çšããããšã§ãããæµåçã§é åçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãäœæã§ããŸããã¢ããªã±ãŒã·ã§ã³ãæ³šææ·±ãåæããéèŠãªæŽæ°ãç¹å®ããã³ãŒãããããã¡ã€ãªã³ã°ããŠãåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°æŠç¥ã广çã§ããããšã確èªããããšãå¿ããªãã§ãã ããããããã®é«åºŠãªæ©èœã掻çšããŠãäžçäžã®ãŠãŒã¶ãŒãåã°ãã髿§èœãªReactã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããŸãããã
Reactãšã³ã·ã¹ãã ãé²åãç¶ããäžãææ°ã®æ©èœããã¹ããã©ã¯ãã£ã¹ãåžžã«ææ¡ããŠããããšã¯ãã¢ãã³ã§ããã©ãŒãã³ã¹ã®é«ãWebã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã«äžå¯æ¬ ã§ããåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ããã¹ã¿ãŒããããšã§ãè€éãªUIã®æ§ç¯ãšãã課é¡ã«åãçµã¿ãåè¶ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããã®æºåãæŽããŸãã
ãããªãåŠç¿ãªãœãŒã¹
- React Concurrent Modeã«é¢ããããã¥ã¡ã³ãïŒ https://react.dev/reference/react
- React ProfilerïŒ React Profilerã䜿çšããŠããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ããæ¹æ³ãåŠã³ãŸãã
- èšäºãšããã°æçš¿ïŒ MediumãDev.toãå ¬åŒReactããã°ãªã©ã®ãã©ãããã©ãŒã ã§ãReact Concurrentæ©èœãšåªå 床ããŒã¹ã®ã¬ã³ããªã³ã°ã«é¢ããèšäºãããã°æçš¿ãæ€çŽ¢ããŠãã ããã
- ãªã³ã©ã€ã³ã³ãŒã¹ïŒ React Concurrentæ©èœã詳现ã«ã«ããŒãããªã³ã©ã€ã³ã³ãŒã¹ã®åè¬ãæ€èšããŠãã ããã